<template>
  <div class="reserve-list">
    <van-nav-bar
      title="心理安全辅导预约"
      left-text="返回"
      left-arrow
      fixed
      @click="handleBack"
    />
    <van-cell-group inset class="reserve-top">
      <van-cell
        :value="userInfo?.tenantName"
        :label="`联系电话：${userInfo?.phone}`"
      >
        <template #title>
          <span class="name">{{ userInfo?.name }}</span>
          <span class="sex">性别:{{ userInfo?.sexName }}</span>
          <span> 年龄:{{ age }} </span>
        </template>
      </van-cell>

      <van-field
        :model-value="reserveDate"
        is-link
        readonly
        label="预约日期"
        @click="showReserveDatePicker = true"
      />

      <!-- <van-popup v-model:show="showReserveDatePicker" position="bottom">
        <van-datetime-picker
          type="date"
          title="选择年月日"
          @confirm="onConfirm"
          @cancel="showReserveDatePicker = false"
        />
      </van-popup> -->

      <van-calendar v-model:show="showReserveDatePicker" @confirm="onConfirm" />

      <van-cell center :title="sort">
        <template #right-icon>
          <van-switch
            v-model="sort"
            size="24"
            active-value="正序"
            inactive-value="倒序"
          />
        </template>
      </van-cell>
    </van-cell-group>

    <!-- <van-sticky :offset-top="50">
      <div class="form-top">
        <span>预约设置</span>
        <span><van-icon name="add-o" @click="handleAdd" /></span>
      </div>
    </van-sticky> -->

    <ReserveView
      v-for="(form, index) of reserveList"
      :key="index"
      v-model:form="reserveList[index]"
    >
      <van-button type="primary" block class="reserve-btn">预约</van-button>
    </ReserveView>
  </div>
</template>

<script lang="ts" setup>
import { computed, toRefs, ref, onBeforeUpdate, reactive, onMounted } from 'vue'
import { useStore } from '/@/store'
import dayjs from 'dayjs'
import { useBack } from '/@/use/useRouteBack'
import ReserveView from '/@/views/reserve/components/ReserveView.vue'
import { useDatePicker } from '/@/use/datePicker'
import { receiveQuery } from '../api'
import { IForm } from '../types'

const { state } = useStore()

const { userInfo } = toRefs(state)

const age = computed(
  () => dayjs().year() - dayjs(userInfo.value?.birthday).year()
)

const { back: handleBack } = useBack()

const { sort } = useSearchForm()

const reserveDate = ref('')

const { onConfirm, picker: showReserveDatePicker } = useDatePicker(reserveDate)

function useSearchForm() {
  const sort = ref('正序')
  return { sort }
}

const { reserveList } = useReserveList()

function useReserveList() {
  const reserveList = ref<IForm[]>([])

  onMounted(async () => {
    const {
      data: { record },
    } = await receiveQuery()
    reserveList.value = record
  })

  return { reserveList }
}
</script>

<style lang="less" scoped>
.reserve-list {
  padding-top: 60px;
  margin-bottom: 60px;
}

.form-top {
  // margin-top: 20px;
  // margin-bottom: 12px;
  padding: 20px 20px 12px 20px;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f7f9;
}

.reserve-top {
  margin-bottom: 30px;
}

.sex,
.name {
  margin-right: 15px;
}

.buttons {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}

.reserve-btn {
  width: 50%;
  margin: 0 auto;
  margin-top: 20px;
}
</style>
